<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


<div class="layui-fluid">
    <div class="layui-card">

        <div class="layui-card-header"  style="color:#d02e25;font-family: '楷体'; ">
            文章列表
        </div>


            <div class="layui-card-body">
                <div class="layui-form-item refresh-nav" align="center" style="font-family: '宋体'; font-size: 20px;" >
                    <div class="layui-inline">
                        <label class="layui-form-label" >类别</label>
                        <div class="layui-input-inline">
                            <input style="height: auto;margin-top: 5px" type="text" id="typeName" name="typeName" placeholder="请输入" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">来源</label>
                        <div class="layui-input-inline">
                            <input style="height: auto;margin-top: 5px" type="text" id="theSource" name="theSource" placeholder="请输入" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline" id="search">
                        <button class="layui-btn" id="searchBtn" data-type="reload">搜索</button>
                    </div>
                </div>
                <table id="articleList" lay-filter="articleList"></table>
            </div>
        </div>
    </div>

    <script>

        var layedit = layui.layedit;
        var form = layui.form;


        layui.use(['table','form'], function(){
            var table = layui.table;

            //农资列表
            table.render({
                elem: '#articleList'
                // ,height: 'full-200'
                ,method: 'post'
                ,url: '/ajax/party/admin/articleList'
                ,page: true
                ,loading: true
                ,cellMinWidth: 80
                ,limit: 15
                ,id: 'articleList'
                ,cols: [[
                    {field: 'id', title: '序号', width: 100, sort: true, fixed: 'left'}
                    ,{field: 'title', title: '标题 ',width: 250}
                    ,{field: 'updateTime', title: '上传时间',width: 250}
                    ,{field: 'typeName', title: '文章类别'}
                    ,{field: 'theSource', title: '来源 '}
                    ,{fixed: 'right', title: '操作', align: 'center', width: 120, toolbar: '#dothing' }
                ]]
            });


            //搜索
            layui.$("#searchBtn").click(function () {
                var theSource = $('#theSource').val();//获取输入框的值
                var typeName = $("#typeName").val();


                table.reload('articleList',
                    {
                        page:true
                        ,limit:10
                        ,where: { theSource: theSource,
                            typeName:typeName}//这里传参  向后台
                        ,url: '/ajax/party/admin/searchArticle'//后台做模糊搜索接口路径
                        ,method: 'post',
                    });

            });


            //监听工具条
            table.on('tool(articleList)', function(obj){
                var data = obj.data;

                if(obj.event === 'detail'){

                    $.post('/ajax/party/admin/getOneArticle',{
                        id:data.id
                    },function(result){
                        layer.open({
                            type: 1,
                            area: ['1200px','80%'],
                            title: "ID:" + data.id,
                            offset: '10%',
                            anim: 4,
                            shadeClose: true,
                            content: showDetails(result.data)
                        });

                        var editDoctorMsg;
                        layui.use('layedit', function(){
                            //上传图片,必须放在 创建一个编辑器前面
                            // layedit.set({
                            //     uploadImage: {
                            //         url: '/api/spfile/upload' //接口url
                            //         ,type: 'post' //默认post
                            //     }
                            // });
                            editDoctorMsg = layedit.build('content', {
                                height: '60%' //设置编辑器高度
                            });
                        });

                        var editIndex = layedit.build('content',{
                            // height: 200,
                            tool: [
                                'strong' //加粗
                                ,'italic' //斜体
                                ,'underline' //下划线
                                ,'del' //删除线
                                ,'|' //分割线
                                ,'left' //左对齐
                                ,'center' //居中对齐
                                ,'right' //右对齐
                                ,'link' //超链接
                                ,'unlink' //清除链接
                                ,'face' //表情
                                ,'image'//插入图片
                            ],
                            uploadImage: {
                                url: '/api/spfile/upload' //接口url
                                ,type: 'post' //默认post
                            }
                        });

                        if(result.data.ontop==1){
                            $("#ontop").attr("checked",true);
                        }
                        if(result.data.isslite==1){
                            $("#isslite").attr("checked",true);
                        }

                        layedit.setContent(editIndex,result.data.content);
                        form.render();



                        form.on('submit(ok)',function (data) {
                            data.field.createTime = new Date().getTime();
                            data.field.addTime = new Date().getTime();
                            data.field.content = layedit.getContent(editIndex);  //将富文本框中的内容取出来放到对象的属性中
                            //设置id  用于jpa更新
                            data.field.id = obj.data.id;
                            if(data.field.ontop=="on"){
                                data.field.ontop=1;
                            }else {
                                data.field.ontop=0;
                            }
                            if(data.field.isslite=="on"){
                                data.field.isslite=1;
                            }else {
                                data.field.isslite=0;
                            }


                            $.ajax({
                                type:"post",
                                url:"/ajax/party/admin/addArticle",
                                contentType : 'application/json;charset=utf-8',
                                //设置请求头信息
                                dataType:"json",
                                data:JSON.stringify(data.field),
                                success:function (res) {
                                    if(res.code==0){
                                        layer.alert("保存成功");
                                        reset();
                                    }
                                }
                            })
                            console.log(data.field);
                            return false;
                        })

                        function reset() {
                            $("#reset").click();
                        }




                    });
                } else if(obj.event === 'del'){
                    layer.confirm('真的删除行么', function(index){
                        $.post("/ajax/party/admin/deleteArticle",{
                            id:data.id
                        },function(result){
                            console.log(result);
                            if(result.code==0){
                                layer.alert("删除成功！");
                            }else{
                                layer.alert("删除失败！");
                            }
                            obj.del();
                            layer.close(index);
                        });
                    });
                }
            });



            //查看详情
            function showDetails(data) {
                var s = '<form class="layui-form" id="form1">\n' +
                    '            <div class="layui-card-body">\n' +
                    '\n' +
                    '                <div class="layui-form-item layui-form-text">\n' +
                    '                    <label class="layui-form-label">文章类别</label>\n' +
                    '                    <div class="layui-input-inline">\n' +
                    '                        <input type="text" name="typeName" value='+ data.typeName+'  lay-verify="required"\n' +
                    '                               autocomplete="off" class="layui-input">\n' +
                    '                    </div>\n' +
                    '\n' +
                    '                    <label class="layui-form-label">文章来源</label>\n' +
                    '                    <div class="layui-input-inline">\n' +
                    '                        <input type="text" name="theSource" value='+ data.theSource +' lay-verify="required"\n' +
                    '                               autocomplete="off" class="layui-input">\n' +
                    '                    </div>\n' +
                    '\n' +
                    '\n' +
                    '                    <label class="layui-form-label">录入者</label>\n' +
                    '                    <div class="layui-input-inline">\n' +
                    '                        <input type="text" name="inputer" value='+ data.inputer +' lay-verify="required"\n' +
                    '                               autocomplete="off" class="layui-input">\n' +
                    '                    </div>\n' +
                    '                </div>\n' +
                    '\n' +
                    '                <div class="layui-form-item layui-form-text">\n' +
                    '                    <label class="layui-form-label">文章状态</label>\n' +
                    '                    <div class="layui-input-inline">\n' +
                    '                        <input type="text" name="status" value='+ data.status +' lay-verify="required"\n' +
                    '                               autocomplete="off" class="layui-input">\n' +
                    '                    </div>\n' +
                    '\n' +
                    '                    <label class="layui-form-label">关键字</label>\n' +
                    '                    <div class="layui-input-inline">\n' +
                    '                        <input type="text" name="keyword" value='+ data.keyword +' lay-verify="required"\n' +
                    '                               autocomplete="off" class="layui-input">\n' +
                    '                    </div>\n' +
                    '\n' +
                    '\n' +
                    '                    <label class="layui-form-label">简介</label>\n' +
                    '                    <div class="layui-input-inline">\n' +
                    '                        <input type="text" name="introduce" value='+ data.introduce +' lay-verify="required"\n' +
                    '                               autocomplete="off" class="layui-input">\n' +
                    '                    </div>\n' +
                    '                </div>\n' +
                    '\n' +
                    '                <div class="layui-form-item layui-form-text">\n' +
                    '                    <label class="layui-form-label">阅读量</label>\n' +
                    '                    <div class="layui-input-inline">\n' +
                    '                        <input type="text" name="hits" value='+ data.hits +' \n' +
                    '                               autocomplete="off" class="layui-input">\n' +
                    '\n' +
                    '                    </div>\n' +
                    '\n' +
                    '                    <label class="layui-form-label">评论数</label>\n' +
                    '                    <div class="layui-input-inline">\n' +
                    '                        <input type="text" name="postNum" value='+ data.postNum +' \n' +
                    '                               autocomplete="off" class="layui-input">\n' +
                    '                    </div>\n' +
                    '\n' +
                    '\n' +
                    '                    <label class="layui-form-label">&nbsp;</label>\n' +
                    '                    <div class="layui-input-block">\n' +
                    '                        <input type="checkbox" name="ontop" id="ontop" title="是否置顶">\n' +
                    '                        <input type="checkbox" name="isslite" id="isslite" title="是否推荐">\n' +
                    '                    </div>\n' +
                    '                </div>\n' +
                    '\n' +
                    '\n' +
                    '\n' +
                    '                <div class="layui-form-item layui-form-text">\n' +
                    '                    <label class="layui-form-label">文章标题</label>\n' +
                    '                    <div class="layui-input-inline" style="width: 44.5%;">\n' +
                    '                        <input type="text" name="title" value='+ data.title +'  lay-verify="required"\n' +
                    '                               autocomplete="off" class="layui-input">\n' +
                    '                    </div>\n' +
                    '\n' +
                    '                    <label class="layui-form-label">副标题</label>\n' +
                    '                    <div class="layui-input-inline">\n' +
                    '                        <input type="text" name="subTitle" value='+ data.subTitle +'  lay-verify="required"\n' +
                    '                               autocomplete="off" class="layui-input">\n' +
                    '                    </div>\n' +
                    '                </div>\n' +
                    '\n' +
                    '                <div class="layui-form-item layui-form-text">\n' +
                    '                    <textarea id="content" name="content"></textarea>\n' +
                    '                </div>\n' +
                    '\n' +
                    '\n' +
                    '                <div class="layui-form-item">\n' +
                    '                    <div class="layui-input-block" style="text-align: center;">\n' +
                    '                        <button class="layui-btn" lay-submit lay-filter="ok">提交</button>\n' +
                    '                        <button type="reset" class="layui-btn layui-btn-primary" id="reset">重置</button>\n' +
                    '                    </div>\n' +
                    '                </div>\n' +
                    '\n' +
                    '\n' +
                    '\n' +
                    '            </div>\n' +
                    '        </form>';
                return s;

            }


        });
    </script>



<script type="application/javascript">
    //保存信息
    form.on('submit(ok)',function (data) {
        data.field.createTime = new Date().getTime();
        data.field.addTime = new Date().getTime();
        data.field.content = layedit.getContent(editIndex);  //将富文本框中的内容取出来放到对象的属性中
        if(data.field.ontop="on"){
            data.field.ontop=1;
        }else {
            data.field.ontop=0;
        }
        if(data.field.isslite="on"){
            data.field.isslite=1;
        }else {
            data.field.isslite=0;
        }


        $.ajax({
            type:"post",
            url:"/ajax/party/admin/addArticle",
            contentType : 'application/json;charset=utf-8',
            //设置请求头信息
            dataType:"json",
            data:JSON.stringify(data.field),
            success:function (res) {
                if(res.code==0){
                    layer.alert("保存成功");
                    reset();
                }
            }
        })
        console.log(data.field);
        return false;
    })

    function reset() {
        $("#reset").click();
    }


</script>

    <script type="text/html" id="dothing">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>

        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

    </script>

</div>